<!--房型详情-->
<template>
  <div v-loading="loading">
    <!-- <Alert type="error">
      <h5>SellOrder.js文件中的扩展SellOrder表的头部信息,你可以在此处定义需要显示的信息,如果需要获取界面的Vue对象属性,参照此扩展组件GridHeaderExtend.vue的说明</h5>
    </Alert> -->
    <!--点击扩展按钮对应的弹出框-->
    <vol-box :model.sync="model" title="房型详情" :width="700" :height="430">
      <VolForm ref="myform" :loadKey="loadKey" :formFileds="formFileds" :formRules="formRules" :labelWidth="130">
      </VolForm>
      <!-- 添加slot槽覆盖footer的按钮，添加新的按钮 -->
      <div slot="footer">
        <Button type="error" @click="getFirstRow" icon="md-checkmark">保存</Button>
        <Button type="success" @click="resetForm" icon="md-refresh">重置</Button>
        <Button type="info" @click="close" icon="md-close">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
import bus from '@/utilities/bus.js'
import VolForm from '@/components/basic/VolForm.vue'
export default {
  components: {
    VolBox: () => import('@/components/basic/VolBox.vue'),
    VolForm,
  },
  data() {
    return {
      loading: false,
      loadKey: true,
      model: false,
      formFileds: {
        room_Introduction: '', //房型介绍
        people_Number: '', //房间最多可住人数
        oldestChild: '',
        imageAddress: [], //轮播图
        room_picture: [], //头图
        room_direction: '', //房间朝向
        room_area: '', //房间面积
        remark: '', //备注
        oldestChild: '', //最大儿童数
        Facilities_and_Features: [], //设施与功能
        elementIdex: '', //索引
        housetype: '',
      },
      formFiledsRow: {}, //编辑数据保存
      formRules: [
        [
          {
            title: '头图',
            required:false,
            field: 'room_picture',
            colSize: 4,
            type: 'imgupgrade',
            url: '/api/Rooms/Upload',
            maxFile: 1,
            multiple: true,
          },
          {
            title: '轮播图',
            multiple: true,
            maxFile: 3,
            required: false,
            field: 'imageAddress',
            colSize: 8,
            type: 'imgupgrade',
            url: '/api/Rooms/Upload',
          },
        ],

        [
          {
            title: '房间最多可住人数',
            field: 'people_Number',
            required: true,
            colSize: 4,
            type: 'number',
          },
          {
            dataKey: 'room_Introduction',
            // disabled: true,
            data: [],
            title: '房型介绍',
            required: true,
            field: 'room_Introduction',
            colSize: 4,
            type: 'select',
          },
          {
            dataKey: 'housetype',
            // disabled: true,
            data: [],
            title: '户型',
            required: true,
            field: 'housetype',
            colSize: 4,
            type: 'text',
          },
        ],
        [
          {
            title: '房间朝向',
            required: true,
            field: 'room_direction',
            colSize: 4,
            type: 'text',
          },
          {
            title: '房间面积',
            required: true,
            field: 'room_area',
            colSize: 4,
            type: 'decimal',
          },
          {
            title: '最大儿童数',
            required: true,
            field: 'oldestChild',
            colSize: 4,
            type: 'number',
          },
        ],
        [
          {
            title: '备注',
            required: true,
            field: 'remark',
            colSize: 12,
            type: 'text',
          },
        ],
        [
          {
            dataKey: 'Facilities_and_Features',
            data: [],
            title: '设施与功能', //( 1 无烟房 2 WiFi 3 电话 4 迷你吧 5 送餐)
            required: true,
            field: 'Facilities_and_Features',
            colSize: 12,
            type: 'checkbox',
          },
        ],
      ],
    }
  },
  created() {},
  methods: {
    // // 循环动态表单
    // getFormOption(field) {
    //   let option;
    //   this.formRules.forEach((x) => {
    //     x.forEach((item) => {
    //       if (item.field == field) {
    //         option = item;
    //       }
    //     });
    //   });
    //   return option;
    // },
    // // 给下拉选择器绑定 onChange 事件
    // onInit() {
    //   let orderTypeOption = this.getFormOption("payment_method");
    //   orderTypeOption.onChange = (val) => {
    //     let orderTypeOption = this.getFormOption("payment_method");
    //     orderTypeOption.data.forEach((item) => {
    //       if (item.key == val) {
    //         console.log(item, val);
    //         this.formFileds.account_name = item.accMain.account_name;
    //       }
    //     });
    //   };
    // },
    // 保存按钮
    open(row) {
      this.model = true
      this.formFileds.room_Introduction = row.room_Introduction
      this.formFileds.housetype = row.housetype
      this.formFileds.people_Number = row.people_Number
      if (typeof row.imageAddress == 'object') {
        this.formFileds.imageAddress = row.imageAddress
      } else {
        this.formFileds.imageAddress = JSON.parse(row.imageAddress)
      }
      if (typeof row.room_picture == 'object') {
        this.formFileds.room_picture = row.room_picture
      } else {
        this.formFileds.room_picture = JSON.parse(row.room_picture)
      }
      this.formFileds.room_direction = row.room_direction
      this.formFileds.room_area = row.room_area
      this.formFileds.remark = row.remark
      this.formFileds.oldestChild = row.oldestChild
      this.formFileds.Facilities_and_Features = row.Facilities_and_Features
      this.formFileds.elementIdex = row.elementIdex //索引
      console.log('编辑数据行数据', this.formFileds)
    },
    // 保存按钮
    getFirstRow() {
      let that = this
      this.$refs.myform.validate(() => {
        //   // this.loading = true;
        that.$parent.jsEvent(this.formFileds)
      })
    },
    close() {
      this.resetForm()
      this.model = false
      //  let that= this.$store.getters.data().viewPageTest;
      //  that.$refs.table.load();
    },
    close2() {
      this.model = false
      //  let that= this.$store.getters.data().viewPageTest;
      //  that.$refs.table.load();
    },
    // 重置表单
    resetForm() {
      this.$refs.myform.reset()
    },
  },
}
</script>
